<template>
  <div class="content">
    <el-form inline :model="from">
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="from.startTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="from.endTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型">
        <el-select v-model="from.timeType" size="mini">
          <el-option label="每10分钟" value="10m"></el-option>
          <el-option label="每1小时" value="1h"></el-option>
          <el-option label="每2小时" value="2h"></el-option>
          <el-option label="每6小时" value="6h"></el-option>
          <el-option label="每12小时" value="12h"></el-option>
          <el-option label="每24小时" value="24h"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <p class="data" v-show="show">暂无数据</p>

    <div id="ComparisonAutomation" v-show="shows" style="height: 73vh"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getSurdisplaceDataComparisonList } from "../../../../api/Monitoring";
import moment from "moment";
export default {
  name: "ComparisonAutomation",
  props: {
    node: Object,
  },
  data() {
    return {
      referenceType: "WGS84",
      shows: true,
      show: false,
      from: {
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        startTime: moment().subtract(7, "day").format("YYYY-MM-DD 00:00:00"),
        timeType: "1h",
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      //   form: {
      //     // timeType: "1h",
      //     startTime: this.$store.state.runData,
      //     endTime: this.$store.state.endtTime,
      //   },
    };
  },
  methods: {
    search() {
      this.drawLine();
    },
    async drawLine() {
      this.shows = true;
      this.show = false;
      let myChart = this.$echarts.init(
        document.getElementById("ComparisonAutomation")
      );
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.from.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.from.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getSurdisplaceDataComparisonList({
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
        // monitorId: this.node.id,
        endTime: queryData.endTime,
        startTime: queryData.startTime,
        statisticType: this.from.timeType,
      });
      console.log(res);
      //先进行赋值
      var xdata = [];
      var ydata = [];
      var hdata = [];
      var theDate = [];
      var hdata1 = [];
      var xdata1 = [];
      var ydata1 = [];
      //先进行赋值
      if (res.resultCode == 200) {
        this.show = false;
        this.shows = true;
        for (let i = 0; i < res.parameter.dataComparisonAutoList.length; i++) {
          var obj1 = new Object();
          obj1.value = res.parameter.dataComparisonAutoList[i].xdata;
          xdata[i] = obj1;
          var obj2 = new Object();
          obj2.value = res.parameter.dataComparisonAutoList[i].ydata;
          ydata[i] = obj2;
          var obj3 = new Object();
          obj3.value = res.parameter.dataComparisonAutoList[i].hdata;
          hdata[i] = obj3;
          var obj4 = new Object();
          obj4.value = res.parameter.dataComparisonAutoList[i].theDate;
          theDate[i] = obj4;
          res.parameter.dataComparisonAutoList.forEach((item) => {
            item.xdata = Number(item.xdata).toFixed(3);
          });
          res.parameter.dataComparisonAutoList.forEach((item) => {
            item.ydata = Number(item.ydata).toFixed(3);
          });
          res.parameter.dataComparisonAutoList.forEach((item) => {
            item.hdata = Number(item.hdata).toFixed(3);
          });
        }
        for (
          let j = 0;
          j < res.parameter.dataComparisonManualList.length;
          j++
        ) {
          var obj5 = new Object();
          obj5.value = res.parameter.dataComparisonManualList[j].hdata;
          hdata1[j] = obj5;
          var obj6 = new Object();
          obj6.value = res.parameter.dataComparisonManualList[j].xdata;
          xdata1[j] = obj6;
          var obj7 = new Object();
          obj7.value = res.parameter.dataComparisonManualList[j].ydata;
          ydata1[j] = obj7;
          res.parameter.dataComparisonManualList.forEach((item) => {
            item.hdata = Number(item.hdata).toFixed(3);
          });
          res.parameter.dataComparisonManualList.forEach((item) => {
            item.ydata = Number(item.ydata).toFixed(3);
          });
          res.parameter.dataComparisonManualList.forEach((item) => {
            item.xdata = Number(item.xdata).toFixed(3);
          });
        }
      } else if (res.resultCode == 204) {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
      }
      let option = {
        title: {
          left: "center",
          text: this.node.name + "人工与在线监测对比分析图",
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  " mm<br/>";
              }
              return tip;
            },
        },
        color: ["#33a3dc", "#0000CC", "#464547"],
        legend: {
          itemHeight: 2,
          data: [
            {
              name: "BW1-1-∆X",
              icon: "rect",
            },
            {
              name: "BW1-1-∆Y",
              icon: "rect",
            },
            {
              name: "BW1-1-∆H",
              icon: "rect",
            },
            {
              name: "人工-∆X",
              icon: "image://" + require("../../../../assets/xuxian/1.png"),
            },
            {
              name: "人工-∆Y",
              icon: "image://" + require("../../../../assets/xuxian/2.png"),
            },
            {
              name: "人工-∆H",
              icon: "image://" + require("../../../../assets/xuxian/3.png"),
            },
          ],
          top: 30,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          // right: "3.7%",
        },
        xAxis: {
          name: "时间",
          nameLocation: "center",
          nameTextStyle: {
            padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
          },
          type: "category",
          boundaryGap: false,
          data: theDate,
        },
        yAxis: {
          name: "位移(mm)",
          type: "value",
        },
        series: [
          {
            name: "人工-∆X",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#33FFFF",
              type: "dotted",
            },
            data: xdata1,
            // smooth: true,
          },
          {
            name: "人工-∆Y",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#66FF66",
              type: "dotted",
            },
            data: ydata1,
            // smooth: true,
          },
          {
            name: "人工-∆H",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#CC00FF",
              type: "dotted",
            },
            data: hdata1,
            // smooth: true,
          },
          {
            name: "BW1-1-∆X",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#33a3dc",
              type: "solid",
            },
            data: xdata,
            // smooth: true,
          },
          {
            name: "BW1-1-∆Y",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#0000CC",
              type: "solid",
            },
            data: ydata,
            // smooth: true,
          },
          {
            name: "BW1-1-∆H",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#464547",
              type: "solid",
            },
            data: hdata,
            // smooth: true,
          },
        ],
        grid: {
          y2: 100,
        },
      };

      myChart.on("legendselectchanged", function (params) {
        var selected = params.selected;
        if (selected["人工-∆X"]) {
          option.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/1.png");
        } else {
          option.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/5.png");
        }
        if (selected["人工-∆Y"]) {
          option.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/2.png");
        } else {
          option.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/6.png");
        }
        if (selected["人工-∆H"]) {
          option.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/3.png");
        } else {
          option.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/7.png");
        }
        myChart.setOption(option);
      });
      myChart.hideLoading();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
.data {
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}
</style>
